<!--
 * @Author: CemCode cemoment@aliyun.com
 * @Date: 2022-04-13 16:57:25
 * @LastEditors: CemCode cemoment@aliyun.com
 * @LastEditTime: 2022-07-24 00:32:35
 * @FilePath: \vue-blog-2\src\views\admin\components\LinkMenu.vue
 * @Description: 
 * Copyright (c) 2022 by CemCode cemoment@aliyun.com, All Rights Reserved. 
-->
<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical"
    :background-color="this.$store.state.theme.primary_color"
    text-color="#fff"
    active-text-color="#fff"
  >
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-s-operation"></i>
        <span>仪表盘</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="1-1">
          <router-link to="/admin/dashboard/home">首页</router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-collection"></i>
        <span>文章</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="2-1">
          <router-link to="/admin/article_manager/all_article">全部文章</router-link>
        </el-menu-item>
        <el-menu-item index="2-2">
          <router-link to="/admin/article_manager/edit_article/1">新增文章</router-link>
        </el-menu-item>
        <el-menu-item index="2-3">
          <router-link to="/admin/article_manager/types">类别管理</router-link>
        </el-menu-item>
        <el-menu-item index="2-4">
          <router-link to="/admin/article_manager/labels">标签管理</router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-files"></i>
        <span>项目</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="3-1">
          <router-link to="/admin/project/project_manage">项目管理</router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name: "LinkMenu",
  methods: {},
};
</script>
<style lang="scss" >
.el-menu-vertical {
  min-width: 100%;
  height: 100%;

  i {
    color: white !important;
  }

  .el-menu-item-group__title {
    padding: 0;
  }

  .el-menu-item {
    height: 30px;
    line-height: 30px;
    a {
      display: inline-block;
      width: 100%;
      text-decoration: none;
      color: white;
      font-size: 13px;
    }
  }
  .is-active {
    background-color: #0076b2 !important;
  }
}
</style>